<template>
    <div>
        <h2>新增销售订单</h2>
        <el-divider></el-divider>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-row :gutter="20">
                <el-col :span="8" :offset="4">
                    <el-form-item label="销售单号：" prop="SalesCode">
                        <el-input v-model="form.SalesCode" readonly></el-input>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="客户编号：" prop="ClientCode">
                        <el-autocomplete v-model="form.ClientCode" :fetch-suggestions="querySearch" placeholder="请输入内容"
                            style="width: 100%"></el-autocomplete>
                    </el-form-item></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12" :offset="4"><el-form-item label="客户名称：" prop="ClientName">
                        <el-input v-model="form.ClientName"></el-input>
                    </el-form-item></el-col>
                <el-col :span="12" :offset="4"><el-form-item label="联系人" prop="Contacts">
                        <el-input v-model="form.Contacts"></el-input>
                    </el-form-item></el-col>
                <el-col :span="12" :offset="4"><el-form-item label="电话：" prop="Phone">
                        <el-input v-model="form.Phone"></el-input>
                    </el-form-item></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8" :offset="4"><el-form-item label="发货日期：" prop="Delivery">
                        <el-date-picker v-model="form.Delivery" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="销售员：" prop="Creator">
                        <el-input v-model="form.Creator"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8" :offset="4">
                    <el-form-item label="销售时间：" prop="CreatorTime">
                        <el-date-picker v-model="form.CreatorTime" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="备注：" prop="Remarks">
                        <el-input type="textarea" v-model="form.Remarks"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <h3 class="dot">产品信息</h3>
        <div class="eto" style="text-align: right;">
            <el-button type="primary" @click="productShow">新增产品</el-button>
        </div>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible" width="60%">
            <div>
                产品编号:<el-input v-model="ProductCode" style="width: 200px"></el-input>
                产品名称:<el-input v-model="ProductName" style="width: 200px"></el-input>
                类型:<el-select v-model="ProductTypeId" placeholder="请选择">
                    <el-option :value="0" label="请选择">请选择 </el-option>
                    <el-option :value="1" label="移动电源">移动电源 </el-option>
                    <el-option :value="2" label="线材类">线材类 </el-option>
                </el-select>
                <el-button type="primary" @click="ProductManagementGetList()">查询</el-button>
            </div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="productCode" label="产品编号"> </el-table-column>
                <el-table-column prop="productName" label="产品名称"> </el-table-column>
                <el-table-column prop="specs" label="规格"> </el-table-column>
                <el-table-column prop="productTypeId" label="类别">
                    <template slot-scope="data">
                        <span v-if="data.row.productTypeId == 11">移动电源</span>
                        <span v-if="data.row.productTypeId == 12">线材类</span>
                        <span v-if="data.row.productTypeId == 13">钢管类</span>
                        <span v-if="data.row.productTypeId == 14">螺母</span>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="存储单位"> </el-table-column>
                <el-table-column prop="inventory" label="库存数"> </el-table-column>
                <el-table-column prop="packageType" label="包装类型"> </el-table-column>
                <el-table-column prop="price" label="价格"> </el-table-column>
                <el-table-column prop="weight" label="重量"> </el-table-column>
            </el-table>
            <!-- 分页 -->
            <br />
            <div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="yesshow">确 定</el-button>
            </div>
        </el-dialog>


        <template>
            {{ productlist }}
            <el-table :data="productlist" border style="width: 100%" @selection-change="handleSelectionChanges">
                <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
                <el-table-column prop="productName" label="产品名称">
                </el-table-column>
                <el-table-column prop="productCode" label="产品编码">
                </el-table-column>
                <el-table-column prop="specs" label="规格">
                </el-table-column>
                <el-table-column prop="unit" label="存储单位"> </el-table-column>
                <el-table-column prop="price" label="单价"> </el-table-column>
                <el-table-column prop="saleNum" label="数量">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.saleNum" :min="1" :max="scope.row.inventory"
                            placeholder="1"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="总价">
                    <template slot-scope="scope">
                        {{ scope.row.price * scope.row.saleNum }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">

                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="onDel(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div>
            <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
            <el-button @click="Cancel">返回</el-button>
        </div>
    </div>
</template>

<script>
import { CustomerBy, BindSel, AddSalesManagement } from "@/api/BusinessServers/SalesManagement";
import { autoGenerateCode } from "@/utils/utils";
import {
    ProductManagementGetList
} from "@/api/BasicsDatumServer/ProductManagement";
export default {
    //数据
    data() {
        return {
            form: {
                SalesCode: "",
                ClientCode: "",
                ClientName: "",
                Phone: "",
                Delivery: "",
                Remarks: "",
                Creator: "",
                CreatorTime: "",
                Contacts: "",
            },
            //校验
            rules: {
                ClientCode: [
                    { required: true, message: '请输入客户编号', trigger: 'blur' }
                ],
                Delivery: [
                    { required: true, message: '请选择发货日期', trigger: 'change' }
                ],
                Creator: [
                    { required: true, message: '请输入销售员', trigger: 'blur' },
                ],
                CreatorTime: [
                    { required: true, message: '请选择销售日期', trigger: 'change' }
                ],
            },
            options: [], //联想
            //包含批次、盘点数
            ProductManagementDtolist: [],
            dialogTableVisible: false,
            productlist: [],
            //产品表数据
            tableData: [],
            ProductCode: "",
            ProductName: "",
            ProductTypeId: 0,
            pageIndex: 1,
            pageSize: 5,
            totalCount: 0,
            pageCount: 0,
            multipleSelection: [],
            saleNum: 1,
        }
    },
    //方法
    methods: {
        //绑定客户编号
        BindSel() {
            BindSel().then((res) => {
                this.options = Array.from(res.data.data, (item) => ({
                    value: item.customrCode,
                }));
            });
        },
        //联想输入
        querySearch(queryString, cb) {
            var options = this.options;
            var results = queryString
                ? options.filter(this.createFilter(queryString))
                : options;
            cb(results);
            this.CustomerBy();
        },
        createFilter(queryString) {
            return (option) => {
                return (
                    option.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
                );
            };
        },
        CustomerBy() {
            let params = {
                customrCode: this.form.ClientCode,
            };
            console.log(this.form.ClientCode);

            CustomerBy(params).then((res) => {
                if (res.data.data == null) {
                    return;
                }
                this.form.Phone = res.data.data.phone;
                this.form.ClientCode = res.data.data.customrCode;
                this.form.ClientName = res.data.data.customName;
                this.form.Contacts = res.data.data.contacts;

                console.log(res.data.data);
                console.log(res.data.data.customName);
            });
        },
        //添加的多选
        handleSelectionChanges(val) {
            this.ProductManagementDtolist = val;
        },
        //取消
        Cancel() {
            this.$router.push("/BusinessMenge/SalesManagement/SalesManagementList");
        },
        //弹出层
        productShow() {
            this.dialogTableVisible = true;
            this.ProductManagementGetList();
        },
        //点击确定获取产品表数据
        yesshow() {
            this.productlist = this.multipleSelection;
            this.dialogTableVisible = false;
        },
        //获取产品列表多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //产品表
        ProductManagementGetList() {
            var params = {
                ProductCode: this.ProductCode,
                ProductName: this.ProductName,
                ProductTypeId: this.ProductTypeId,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
            };
            ProductManagementGetList(params).then((res) => {
                this.tableData = res.data.data.result;
                this.totalCount = res.data.data.totalCount;
                this.pageCount = res.data.data.pageCount;
            });
        },
        //产品分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.ProductManagementGetList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageIndex = val;
            this.ProductManagementGetList();
        },
        //添加
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var params = {
                        salesCode: this.form.SalesCode,
                        clientCode: this.form.ClientCode,
                        clientName: this.form.ClientName,
                        phone: this.form.Phone,
                        delivery: this.form.Delivery,
                        remarks: this.form.Remarks,
                        creator: this.form.Creator,
                        creatorTime: this.form.CreatorTime,
                        contacts: this.form.Contacts,
                        fileSalesManagement2Dto: this.productlist
                    }

                    AddSalesManagement(params).then((res) => {
                        if (res.data.totalCount > 0) {
                            this.$message({
                                message: "添加成功",
                                type: "success",
                            });
                            this.dialogTableVisible = false;
                        } else {
                            this.$message({
                                message: "添加失败",
                                type: "error",
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

            // AddSalesManagement(params).then((res) => {
            //     if (res.data.totalCount > 0) {
            //         this.$message({
            //             message: "添加成功",
            //             type: "success",
            //         });
            //         this.dialogTableVisible = false;
            //     } else {
            //         this.$message({
            //             message: "添加失败",
            //             type: "error",
            //         });
            //     }
            // });
        },
    },
    mounted() {
        this.form.SalesCode = autoGenerateCode("XS");

        this.BindSel();

        this.CustomerBy();
    },
}
</script>

<style></style>